<?php
/**
 * Created by PhpStorm.
 * User: jcc
 * Date: 16/7/8
 * Time: 下午2:45
 */
use app\assets\AppAsset;
use yii\helpers\Html;
use yii\helpers\url;
use yii\bootstrap\Carousel;

AppAsset::register($this);
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/slick/slick-theme.css");
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/slick/slick.css");
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/css/detail.css");
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/css/ToPay.css");
AppAsset::addCss($this, Yii::$app->request->baseUrl . "/css/home.css");
AppAsset::addScript($this, Yii::$app->request->baseUrl . "/slick/slick.min.js");
AppAsset::addScript($this, Yii::$app->request->baseUrl . "/js/enable-weixin-option-menu.js");

$this->title = $commodityDetail['commodity_name'];
$base = Yii::$app->request->baseUrl;
$commodityPic = $commodityDetail['pic_url'];
$name = $commodityDetail['commodity_name'];
//"摩米士5s手机壳";
$price = $commodityDetail['price'];
$standard = "颜色, 尺寸";
$freight = $commodityDetail['postage'];
$color = array("黄色", "黑色", "绿色", "白色", "蓝色");
$freightArray = array("免运费", "运费");
$banner_url = $commodityDetail['banner_url'];
$banners = json_decode($banner_url);
$user_id=\Yii::$app->user->id;
//评论
$goodComment = $commodityDetail['good_comment'];
$badComment = $commodityDetail['bad_comment'];
$middleComment = $commodityDetail['middle_comment'];
$totalComment = $goodComment + $badComment + $middleComment;
$comments = array($goodComment, $middleComment, $badComment);
$appraiseArray = array('好评(' . $goodComment . ')', '中评(' . $middleComment . ')', '差评(' . $badComment . ')')
?>
<style>
    .wrap{
        background: #ffffff;
    }
</style>
<div
    style="width: 100%;margin-bottom: 18px;background: #f6f6f6;border-top: 1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;"
    class="slick-gallery">
    <?php for ($i = 0; $i < count($banners); $i++) { ?>
        <figure class="slick-slide"><img class="bannerImg" src="<?= $banners[$i] ?>"/></figure>
    <?php } ?>
</div>
<div class="commodity-name" style="font-size: 18px;height: auto">
    <?php echo $name ?>
</div>
<div class="commodity-price">
    <span style="font-size: 18px">¥</span>
    <span style="font-size: 24px"><?php echo substr($price, 0, -2) ?></span>
    <span style="font-size: 18px"><?php echo substr($price, -2) ?>&nbsp</span>
    <!--    <span style="font-size: 18px">¥</span>-->
    <!--    <span style="font-size: 24px">--><?php //echo substr($price2,0,-3)?><!--</span>-->
    <!--    <span style="font-size: 18px">--><?php //echo substr($price2,-3)?><!--&nbsp</span>-->
</div>
<div style="background-color:#F2F2F2;height:200px;;height: auto !important;">
    <div style="height: 1px"></div>
    <?php $counti = count($commodityAttributeArray);
    for ($i = 0; $i < $counti; $i++) { ?>
        <div class="detail-standard" onclick="myClick(<?php echo $i ?>)">
            <div class="detail-left">
                <div style="clear: both;margin-left: 3%">选择 <?php echo($commodityAttributeArray[$i]['attr_name']) ?>:
                </div>
            </div>
            <div class="detail-right">
                <!--        <div style="clear: both" id="standard->">></div>-->
                <div style="clear: both"><img id="standard-><?php echo $i ?>" src="<?= $base ?>/images/down_icon.png"/>
                </div>

            </div>
        </div>
        <div class="menu<?php echo $i ?>" id="standard" style="display: none">
            <!--    <div>颜色:</div>-->
            <div>
                <?php $attr_opts = $commodityAttributeArray[$i]['attr_opts'];
                $countj = count($attr_opts);
                for ($j = 0; $j < $countj; $j++) {
                    ?>
                    <?php $attr_opt_name = $attr_opts[$j]['attr_opt_name'];
                    if ($j == 0) {
                        ?>
                        <button class="standard-color" style="background-color: #F9B150;color: white" is_selected="true"
                                value="<?php echo $attr_opts[$j]['attr_opt_id'] ?>" datai="<?php echo $i ?>"
                                dataj="<?php echo $countj ?>" onclick="changeStandardColor(this)"
                                id="<?php echo $i . $j ?>"><?php echo $attr_opt_name ?></button>
                    <?php } else { ?>
                        <button class="standard-color" is_selected="false"
                                value="<?php echo $attr_opts[$j]['attr_opt_id'] ?>" datai="<?php echo $i ?>"
                                dataj="<?php echo $countj ?>" onclick="changeStandardColor(this)"
                                id="<?php echo $i . $j ?>"><?php echo $attr_opt_name ?></button>

                    <?php } ?>
                <?php } ?>
            </div>
        </div>
    <?php } ?>



    <div class="detail-standard" onclick="myClick(4)">
        <div class="detail-left">
            <div style="clear: both;margin-left: 3%">选择数量:
            </div>
        </div>
        <div class="detail-right">
            <!--        <div style="clear: both" id="standard->">></div>-->
            <div style="clear: both"><img id="standard" src="<?= $base ?>/images/down_icon.png"/>
            </div>

        </div>
    </div>


    <div class="menu4" id="standard" style="display: none">
        <!--    <div>颜色:</div>-->
        <div style="font-size: 14px;color: #4A4A4A;position: relative;top: 20px;left: 2px;width: 40%;">购买数量:
                 (库存: <span class ='stock_num'>
                     <?=$commodityDetail['stock_num']?>

                    </span>)
        </div>
        <div style="clear: both"></div>
        <div class="cpsx_info_num" style="position: relative;left: 50%;top: -10px;width: 76%;">
            <div class="deleteDiv" onclick="deletesSum()">-</div>
            <div id="sumId" class="shopSum" >1</div>
            <div class="addDiv" onclick="addSum()">+</div>
        </div>

    </div>


    </div>







    <div class="detail-standard" style="display: none" id="appraise" onclick="clickAppraise()">
        <div class="detail-left">
            <div style="clear: both;margin-top:0px;margin-left: 3%">
                <p id="totalComment" style="float: left; height: 15px">评价(<?= $totalComment ?>)</p>
            </div>
        </div>
        <div class="detail-right">
            <!--        <div style="clear: both" id="appraise->"></div>-->
            <div style="clear: both"><img id="appraise->" src="<?= $base ?>/images/down_icon.png"/></div>
        </div>
    </div>
    <div class="appraise" style="display: none">
        <div>
            <?php for ($i = 0; $i < count($appraiseArray); $i++) { ?>
                <button class="appraise-color" onclick=""
                        id="<?php echo "appraise" . $i ?>"><?php echo $appraiseArray[$i] ?></button>
                <!--            changeAppraiseColor(--><?php //echo $i?><!--)-->
            <?php } ?>
        </div>
        <input id="comments" hidden value="<?php echo implode(',', $comments) ?>">
    </div>

    <div style="height:3px;background-color: #f2f2f2" ></div>
    <div class="detail-standard" id="appraise" onclick="clickDetailContent()">
        <div class="detail-left">
            <div style="clear: both;margin-top:0px;margin-left: 3%">
                <button style="border: hidden;outline: none; background-color: white;padding-left: 0px">
                    查看详情
                </button>
            </div>
        </div>
        <div class="detail-right">
            <!--        <div style="clear: both" id="appraise->"></div>-->
            <div style="clear: both"><img id="appraise->" src="<?= $base ?>/images/down_icon.png"/></div>
        </div>
    </div>
    <!--    <div style="clear: both"></div>-->
</div>

<!--</div>-->
<div style="height: 59px"></div>
<!--<img class="image-top" style="height: 240px" id="id1" src="http://img4.imgtn.bdimg.com/it/u=3910218416,3261859686&fm=21&gp=0.jpg"/>-->
<div class="footer-button">
    <button class="collection" onclick="collect()">
        <?php
        if ($collection_flag == 1) {
            echo "<img id=\"collect_image\" style=\"float: left;clear: both;margin-left: 30%\" src=\"$base/images/star_icon_clicked@1x.png\"/>";
        } else {
            echo "<img id=\"collect_image\" style=\"float: left;clear: both;margin-left: 30%\" src=\"$base/images/star_icon.png\"/>";
        }
        ?>
        <span style="float: left;clear: both;font-size: 8px;color: #4A4A4A;width: 100%; ">收藏商品</span>
    </button>
    <button class="join" onclick="clickShoppingCart()">
        <img style="height: 16px;margin-top:-4px;" src="<?= $base ?>/images/Shopping cart_icon@2x.png"/>
        <span style="margin-left: 5px;font-size: 14px;color: #F89108;">加入购物车</span></button>
    <button class="buy-button" onclick="clickToPay()">立即购买</button>
</div>

<script>
    function goToHome() {
        window.location.href = 'home';
    }
</script>



<script>

$(document).ready(function(){
    var commodity_id="<?php echo $commodityDetail['commodity_id']?>";
    $.ajax({
        data:{
            "commodity_id":commodity_id,
        },
        url:"../web/click-count",
        success:function(json){
            console.log('success',json);
        },
        error:function(json){
            console.log('error',json);
        }
    })
})













    $(document).ready(function () {
        function  imageLoaded(){
            var height = $(this).prop('height');
            var width = $(this).prop('width');
            if (parseInt(height) > parseInt(width)) {
                console.log(height,width);
                $(this).height($(".slick-gallery").height());
                $(this).width('auto');
            } else {
                $(this).width('100%');
                $(this).height('auto');
                $(this).css('margin-top',($(this).width()-$(this).height())/2);
            }
        }
        $('.slick-gallery').slick({
            'autoplay': true,
            'dots': true
        });
        $(".slick-gallery").css('height', $(".slick-gallery").css('width'));
        $(".bannerImg").each(function(){
                if(this.complete){
                    imageLoaded.call(this);
                }else{
                    $(this).one('load', imageLoaded);
                }

        })

    });


    var arr = new Array();
    arr[1] = "https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1467968005362&di=188526e78cf402e1582e3d49e39c7a43&imgtype=jpg&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%253D580%2Fsign%3Dac21864bd5ca7bcb7d7bc7278e086b3f%2F9e0ceb1f4134970aee61afa797cad1c8a6865d03.jpg";
    arr[0] = "<?=$commodityPic?>";
    var num = 0;
    function turnpic() {
        idsrc = document.getElementById("id1");
        if (num == arr.length - 1)
            num = 0;
        else
            num += 1;
        idsrc.src = arr[num];
    }

    function myClick(i) {
        if ($('.menu' + i).css('display') == 'none') {//如果是隐藏的
            $('.menu' + i).css('display', 'block');//显示
            if(i==4){
                $('.menu4').css('background-color','#fff');
            }
            document.getElementById('standard->' + i).src = "<?= $base ?>/images/up_icon.png";
        } else if ($('.menu' + i).css('display') == 'block') {//如果是显示的
            $('.menu' + i).css('display', 'none');//隐藏
            document.getElementById('standard->' + i).src = "<?= $base ?>/images/down_icon.png";
        }
    }

    function clickAppraise() {
        if ($('.appraise').css('display') == 'none') {//如果是隐藏的
            $('.appraise').css('display', 'block');//显示
            document.getElementById('appraise->').src = "<?= $base ?>/images/up_icon.png";
        } else if ($('.appraise').css('display') == 'block') {//如果是显示的
            $('.appraise').css('display', 'none');//隐藏
            document.getElementById('appraise->').src = "<?= $base ?>/images/down_icon.png";
        }
    }

    function changeColor(title) {
        <?php for ($i = 0;$i < count($color); $i++){?>
        document.getElementById('<?php echo $i?>').style.background = "white";
        <?php }?>
        document.getElementById(title).style.background = "orange";
    }
    function changeStandardColor(obj) {
        var datai = $(obj).attr('datai');
        var dataj = $(obj).attr('dataj');
        var id = $(obj).attr("id");
        for (var j = 0; j < dataj; j++) {
            $("#" + datai + j).attr('is_selected', false);
            document.getElementById("" + datai + j).style.background = "gainsboro";     //改变未选中标签的颜色
            document.getElementById("" + datai + j).style.color = "black";
        }
        $(obj).attr('is_selected', true);
        document.getElementById(id).style.background = "#F9B150";       //改变选中标签的颜色
        document.getElementById(id).style.color = "white";
    }

    function changeFreightColor(title) {
        <?php for ($i = 0;$i < count($freightArray); $i++){?>
        document.getElementById('<?php echo "freight" . $i?>').style.background = "white";
        <?php }?>
        document.getElementById("freight" + title).style.background = "orange";
    }
    function changeAppraiseColor(title) {
        <?php for ($i = 0;$i < count($appraiseArray); $i++){?>
        document.getElementById('<?php echo "appraise" . $i?>').style.background = "gainsboro";
        document.getElementById('<?php echo "appraise" . $i?>').style.color = "black";
        $("#<?php echo "appraise" . $i?>").text("<?=$appraiseArray[$i]?>")
        <?php }?>
        document.getElementById("appraise" + title).style.background = '#F38079';
        document.getElementById("appraise" + title).style.color = 'white';
        var comments = $("#comments").val();
        var commentArray = comments.split(",");
        var str, num;
        if (title == 0) {
            num = 1 + parseInt(commentArray[0]);
            str = '好评(' + num + ')';
        } else if (title == 1) {
            num = 1 + parseInt(commentArray[1]);
            str = '中评(' + num + ')';
        } else {
            num = 1 + parseInt(commentArray[2]);
            str = '差评(' + num + ')';
        }
        $("#appraise" + title).text(str);

        var totalComment = $("#totalComment").text();
        totalComment = totalComment.substr(3, 2)
        if (parseInt(totalComment) <= parseInt(<?=$totalComment?>)) {
            var num = <?=$totalComment?> +1;
            var str = '评价(' + num + ')'
            $("#totalComment").text(str)
        }


    }
    function getCommodityMsg() {
        var attr_opts = document.getElementsByClassName('standard-color');
        var attr_opt_ids = new Array();
        for (var i = 0; i < attr_opts.length; i++) {
            if ($(attr_opts[i]).attr('is_selected') == 'true') {
                attr_opt_ids.push(parseInt($(attr_opts[i]).val()))   //获取商品规格的attr_opt_id
            }
        }
  //      var $sum = document.getElementById("sumId").innerText;
//        attr_opt_ids.push(parseInt($sum));
        return attr_opt_ids;
    }
    function clickDetailContent(){
        location.href = "../web/detail-content?commodity_id=" + <?php echo $commodityDetail['commodity_id']?> ;
    }
    function collect() {
        var pic_src = $("#collect_image").attr("src");
        var srcArray = ["<?= $base ?>/images/star_icon.png", "<?= $base ?>/images/star_icon_clicked@1x.png"]
        if (pic_src == srcArray[0]) {
            $("#collect_image").attr("src", srcArray[1]);
            $.ajax({
                //type:'POST',
                data:{
                    "commodity_id":<?php echo $commodityDetail['commodity_id']?>},

                url: "../web/join-collection",
                success: function (json) {
                    alert("收藏成功");

                },
                error: function (data) {
//                console.log(data);
                alert("收藏失败,请登录", data);
                location.href="../web/login";
                }
            })

        }
    }

    function clickShoppingCart() {
        var attr_opt_ids = getCommodityMsg();
        var shop_num =parseInt(document.getElementById("sumId").innerText);
        console.log('hhahaha',shop_num);
        if (attr_opt_ids.length == 0) {
            alert("请选择规格");
            return;
        }
//        console.log({"attr_opt_ids":attr_opt_ids,"commodity_id":<?php //echo $commodityDetail['commodity_id']?>//})
        $.ajax({
//            type:"POST",
//            dataType:"json",
            data: {
                "attr_opt_ids": JSON.stringify(attr_opt_ids),
                "commodity_id":<?php echo $commodityDetail['commodity_id']?>,
                "shop_num":shop_num
            },
            url: "../web/join-cart",
            success: function (json) {
//                console.log("123",json);
                alert("加入购物车成功");
                location.href = "../web/shop-bag";
            },
            error: function (data) {
//                console.log(data);
               alert("加入购物车失败,请登录", data);
                location.href="../web/login";
            }
        });

    }
    function clickToPay() {
        var attr_opt_ids = getCommodityMsg();
        if (attr_opt_ids.length == 0) {
            alert("请选择规格");
            return;
        }

        var commodityIds = new Array();
        commodityIds.push(<?php echo $commodityDetail['commodity_id']?>);

        var attrIds = new Array();
        attrIds.push(attr_opt_ids);
        location.href = "../web/to-pay?commodity_ids=" + JSON.stringify(commodityIds) + "&attr_opt_ids=" + JSON.stringify(attrIds) + "&share_id="+<?= $share_id?>;
    }



function deletesSum(){
    var $sum = document.getElementById("sumId").innerText;

    if(parseInt($sum) > 1){
        $sum = (parseInt($sum) - 1).toString();
        document.getElementById("sumId").innerText = $sum;
        totalSum();
    }else{
        alert("最少数量为1")
    }
}


function addSum(position){
    var $sum = document.getElementById("sumId").innerText;
    $sum = (parseInt($sum) + 1).toString();

    document.getElementById("sumId").innerText = $sum;
    if(parseInt($sum)> parseInt($('.menu4').find('span.stock_num').text())){
        alert('非常抱歉,因库存不足,无法添加更多商品');
        document.getElementById("sumId").innerText = ($sum-1).toString();
    }
   // totalSum();
}

</script>
